'use client';

import { useState } from 'react';
import { Skill, SkillCategory } from '../skills/data';
import { useTheme } from '../context/ThemeContext';
import { themeColorConfig } from '../context/ThemeContext';

type SkillBarsProps = {
  skills: Record<SkillCategory, Skill[]>;
  categories: SkillCategory[];
  className?: string;
};

export default function SkillBars({ skills, categories, className = '' }: SkillBarsProps) {
  const [activeCategory, setActiveCategory] = useState<SkillCategory>(categories[0]);
  const { themeColor } = useTheme();
  
  // 基于当前主题设置颜色
  const primaryColor = themeColorConfig[themeColor].primary[500];
  const primaryColorLight = themeColorConfig[themeColor].primary[100];
  
  return (
    <div className={`${className}`}>
      {/* 类别选择器 */}
      <div className="flex flex-wrap justify-center gap-2 mb-8">
        {categories.map((category) => (
          <button
            key={category}
            className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
              activeCategory === category
                ? `bg-primary-500 text-white`
                : `bg-gray-100 text-gray-700 hover:bg-gray-200`
            }`}
            style={{
              backgroundColor: activeCategory === category ? primaryColor : '',
            }}
            onClick={() => setActiveCategory(category)}
          >
            {category}
          </button>
        ))}
      </div>
      
      {/* 技能条形图 */}
      <div className="space-y-6">
        {skills[activeCategory].map((skill) => (
          <div key={skill.id} className="bg-white rounded-lg p-4 shadow-sm">
            <div className="flex justify-between items-center mb-2">
              <span className="font-medium text-gray-800">{skill.name}</span>
              <span className="text-sm font-bold text-primary-500" style={{ color: primaryColor }}>
                {skill.value}/10
              </span>
            </div>
            <div className="h-2.5 bg-gray-200 rounded-full overflow-hidden">
              <div 
                className="h-full rounded-full transition-all duration-500"
                style={{ 
                  width: `${skill.value * 10}%`,
                  backgroundColor: primaryColor,
                  // 添加渐变效果
                  background: `linear-gradient(90deg, ${primaryColorLight} 0%, ${primaryColor} 100%)`
                }}
              ></div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
} 